<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<link rel="stylesheet" href="./bootstrap/css/bootstrap.css" />
	<script src="./js/hero.js"></script>
	<style>
		.panel {
			width: 900px;
			margin: 10px auto;
		}

		.table img {
			width: 40px;
			height: 40px;
		}
	</style>
</head>

<body>
	<div class="container">
		<div class="panel panel-primary">
			<!-- Default panel contents -->
			<div class="panel-heading">英雄列表管理</div>
			<div class="panel-body">
				<!-- 存放的搜索区域 -->
				<form action="" autocomplete="off">
					<div class="row">
						<div class="col-lg-3">
							<input type="text" class="form-control" placeholder="输入英雄名称" name="name" />
						</div>
						<div class="col-lg-3">
							<select class="form-control" name="gender">
								<option value="">--选择性别--</option>
								<option value="男">男</option>
								<option value="女">女</option>
							</select>
						</div>
						<div class="col-lg-3">
							<input name="age" type="text" class="form-control" placeholder="输入年龄" />
						</div>
						<div class="col-lg-3">
							<button type="button" class="btn btn-success" id="search">搜索</button>
							<button type="button" class="btn btn-warning" id="reset">重置</button>
						</div>
					</div>
				</form>
			</div>
			<table class="table table-bordered table-striped">
				<thead>
					<tr>
						<th>编号</th>
						<th>英雄名称</th>
						<th>英雄性别</th>
						<th>年龄</th>
						<th>操作区</th>
					</tr>
				</thead>
				<tbody id="tbody">
					<tr>
						<td>1</td>
						<td>大乔</td>
						<td>女</td>
						<td>18</td>
						<td>
							<button type="button" class="btn btn-danger">删除</button>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
	<script>
		// 数据可以自己添加
		const list = [
			{ id: 7, name: "大乔", gender: "女", age: 18 },
			{ id: 2, name: "小乔", gender: "女", age: 20 },
			{ id: 3, name: "鲁班", gender: "男", age: 48 },
			{ id: 4, name: "后羿", gender: "男", age: 28 },
			{ id: 5, name: "狄仁杰", gender: "男", age: 28 },
			{ id: 6, name: "钟馗", gender: "男", age: 58 },
			{ id: 1, name: "妲己", gender: "女", age: 20 },
			{ id: 8, name: "露娜", gender: "女", age: 18 }
		]
	</script>
</body>

</html>